<template>
    <div class="extractTemplate-content-box">
        <!-- :dialog-style="{ top: '40px' }" -->
        <a-modal
            :title="currentData.title"
            :visible="visible"
            @ok="handleOk"
            @cancel="visible = false"
            :width="800"
            :footer="null"
            :forceRender="forceRender"
            class="extractTemplate-modal-v"
            :dialogStyle="{top:'20px'}"
        >
            <div class="extractTemplate-modal-box-v" v-if="currentData.isAdd" :key="extractTemplateKey">
                <table border bordercolor="#d9d9d9" style="width: 100%;">
                    <tr>
                        <td class="title-left-v">模板分类</td>
                        <td colspan="5">个人</td>
                    </tr>
                    <tr>
                        <td class="title-left-v">
                            <span style="color: #ed5565;" >*</span>
                            模板标题
                        </td>
                        <td colspan="5">
                            <a-textarea 
                                v-model="fromSate.fmbbt"
                                :autosize="{ minRows: 1, maxRows: 3 }"
                                placeholder="请输入模板标题"
                            ></a-textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="title-left-v" colspan="6">
                            <span style="color: #ed5565;" >*</span>
                            描述模板内容
                        </td>
                        
                    </tr>
                    <tr>
                        <td colspan="6">
                            <commpKindeditor
                                :id="KindeditorId" 
                                :key="commpKindeditorKey"
                                height="200px" 
                                width="100%" 
                                :content.sync="fromSate.fmbnr"
                                :afterChange="()=>{}"
                                :loadStyleMode="false"
                            ></commpKindeditor>
                        </td>
                    </tr>
                    <tr>
                        <td class="title-left-v">操作</td>
                        <td colspan="5">
                            <a-form layout="inline" class="search-form" >
                                <a-form-item>
                                    <a-button @click="visible = false" icon="close-circle">关闭弹窗</a-button>
                                </a-form-item>
                                <a-form-item>
                                    <a-button class="blue-btn" type="primary" @click="saveTemplateOk" icon="check-circle">保存</a-button>
                                </a-form-item>
                            </a-form>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="extractsi-top-box" v-if="currentData.addTemp">
                <div style="flex:1;">
                    <span class="situation-left-title">已保存描述内容模板</span>
                </div>
            </div>
            <div :style="{border:currentData.addTemp?'1px solid #d9d9d9':'none'}">
                <!-- :adaptiveHeight="true" -->
                <commpVxeTable
                    :key="dataTableKey"
                    :config="dataTableConfig" 
                    :columns="columnsVxe" 
                    :formItem="formItem"
                    :isCanWrap="true"
                    ref="acceptanceRegistrationRef"
                    :arrangeSearchNum="3"
                    :assembleWidth="738"
                >
                    <!-- <template v-slot:externalOperations="{data}">
                        <vxe-form-item>
                            <template>
                            </template>
                        </vxe-form-item>
                    </template> -->
                    <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                        <a-form layout="inline" class="search-form" >
                            <a-form-item >
                                <a-button class="orange-btn" type="primary" @click="copyClick(row)" icon="up-circle">提取模板</a-button>
                                
                            </a-form-item>
                            <a-form-item >
                                <a-button class="green-btn" type="primary" @click="handleClick(row,true)" icon="eye">查看</a-button>
                            </a-form-item>
                            <a-form-item v-if="row.fmbly == '个人'">
                                <a-button class="blue-btn" type="primary" @click="handleClick(row)" icon="edit">编辑</a-button>
                            </a-form-item>
                            <a-form-item v-if="row.fmbly == '个人'">
                                <a-button class="red-btn" type="primary" @click="deletionClick(row)" icon="delete">删除</a-button>
                            </a-form-item>
                        </a-form>
                    </template>
                </commpVxeTable>
            </div>
            
            <template slot="footer">
                <div style="display: flex;justify-content: center;">
                    <a-button @click="handleOk" type="primary">关闭</a-button>
                </div>
            </template>
        </a-modal>
        <a-modal
            :title="selectData.isView?'查看模板':'编辑模板'"
            :visible="editvisible"
            @ok="edithandleOk"
            @cancel="editvisible = false"
            :width="700"
            :footer="null"
            :forceRender="forceRender"
            :dialogStyle="{top:'20px'}"
        >
            <div class="extractTemplate-modal-box-v">
                <table border bordercolor="#d9d9d9" style="width: 100%;">
                    <tr>
                        <td class="title-left-v">模板分类</td>
                        <td colspan="5">{{ selectData.fmbly }}</td>
                    </tr>
                    <tr>
                        <td class="title-left-v">
                            <span style="color: #ed5565;" >*</span>
                            模板标题
                        </td>
                        <td colspan="5">
                            <span v-if="selectData.isView">{{selectData.fmbbt}}</span>
                            <a-textarea 
                                v-else
                                v-model="selectData.fmbbt"
                                :autosize="{ minRows: 1, maxRows: 3 }"
                                placeholder="请输入模板标题"
                            ></a-textarea>
                        </td>
                    </tr>
                    <tr>
                        <td class="title-left-v" colspan="6">
                            <span style="color: #ed5565;" >*</span>
                            描述模板内容
                        </td>
                        
                    </tr>
                    <tr>
                        <td colspan="6">
                            <div v-if="selectData.isView" :style="{height:windowInnerHeight - 300+'px'}" style="overflow-y:auto;" >
                                <div v-if="selectData.fmbnr">
                                    <div v-html="selectData.fmbnr" ref="fmbnrRef" ></div>
                                </div>
                                <div v-else>
                                    <a-empty description="暂无内容！"/>
                                </div>
                            </div>
                            <commpKindeditor
                                :id="KindeditorId" 
                                :key="commpKindeditorKey"
                                v-else
                                :height="windowInnerHeight - 300+'px'" 
                                width="100%" 
                                :content.sync="selectData.fmbnr"
                                :afterChange="()=>{}"
                                :loadStyleMode="false"
                            ></commpKindeditor>
                        </td>
                    </tr>
                    <tr v-if="!selectData.isView">
                        <td class="title-left-v">操作</td>
                        <td colspan="5">
                            <a-form layout="inline" class="search-form" >
                                <a-form-item>
                                    <a-button @click="visible = false" icon="close-circle">关闭弹窗</a-button>
                                </a-form-item>
                                <a-form-item>
                                    <a-button class="blue-btn" type="primary" @click="edithandleOk" icon="check-circle">保存</a-button>
                                </a-form-item>
                            </a-form>
                        </td>
                    </tr>
                </table>
            </div>
            <copyTemplate ref="copyTemplateRef" />
        </a-modal>
    </div>
</template>
<script>
import {
    jcmbdeleteMb,
    jcmbaddmb,
    jcmbupdateMb,
} from './service/index'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from './service/api'
import blobType from '@/common/blobType'
import commpKindeditor from '@/components/commp-kindeditor/commpKindeditor.vue'
import copyTemplate from './copyTemplate.vue'
export default {
    components:{
        commpVxeTable,
        commpKindeditor,
        copyTemplate,
    },
    props:{

    },
    data(){
        return{
            KindeditorId:'KindeditorId'+Date.now(),
            KindeditorId1:'KindeditorId'+Date.now(),
            currentData:{},
            visible:false,
            chapterList:[],
            headList:[],
            spinning:false,
            spinningKey:null,
            dataTableConfig: {
              api: assessCheckApi.jcmbtqmb,
              rowId: 'id',
              height:window.innerHeight - 280,
              autoHidden:true,
              pageSize:1000000,
              paramet:{}
            },
            formItem: [
            //     {
            //     label: '模板分类',
            //     model: 'fmbly',
            //     placeholder: '环节名称',
            //     type:'Select',
            //     options:[{
            //         label:'审评中心',
            //         value:'审评中心'
            //     },{
            //         label:'个人',
            //         value:'个人'
            //     }]
            // },
            {
                label: '模板标题',
                model: 'fmbbt',
            }],
            dataTableKey:null,
            columnsVxe: [{
                    title: '模板分类',
                    field: 'fmbly',
                },{
                    title: '模板标题',
                    field: 'fmbbt',
                },{
                    title: '操作',
                    field: 'fmbbt',
                    slots: {
                        // 使用插槽模板渲染
                        default: 'operation_btn',
                        width:371,
                    },
            }],
            columnsVxe1: [{
                title: '模板分类',
                field: 'fmbly',
            },{
                title: '模板标题',
                field: 'fmbbt',
            },{
                title: '操作',
                field: 'fmbbt',
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                width:341,
            }],
            columnsVxe2: [{
                title: '模板分类',
                field: 'fmbly',
            },{
                title: '模板标题',
                field: 'fmbbt',
            }],
            selectId:[],
            editvisible:false,
            selectData:{},
            isVisible:true,
            fromSate:{},
            commpKindeditorKey:null,
            extractTemplateKey:null,
            forceRender:true,
            windowInnerHeight:window.innerHeight,
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(val){
            this.KindeditorId = 'KindeditorId'+Date.now(),
            this.KindeditorId1 = 'KindeditorId'+Date.now(),
            //console.log('我拿到了什么',val)
            this.currentData = val
            if(val.isAdd){
                this.fromSate.fmbnr = val.item.fjcms
                this.fromSate.fmbbt = val.item.fzjmc +'—个人'
            }
            this.commpKindeditorKey = Date.now()
            this.columnsVxe = val.addTemp?JSON.parse(JSON.stringify(this.columnsVxe2)):JSON.parse(JSON.stringify(this.columnsVxe1))
            this.dataTableConfig.height = val.addTemp?window.innerHeight - 570:window.innerHeight - 150
            this.dataTableConfig.paramet = {
                sqsxid:val.sqsxid,
                type:val.item.fzjmc,
            }
            this.dataTableKey = Date.now()
        },
        checkboxChange(val,item){
            if(val.target.checked){
                this.selectId.push(item.id)
            }else{
                this.selectId.splice(this.selectId.indexOf(item.id),1)
            }
            //console.log(this.selectId)
        },
        copyClick(row){
            
            //console.log(row)
            if(row.fmbnr){
                // this.$copyText(row.fmbnr).then(() => {
                //     this.$message.success('复制成功')
                // }).catch(() => {
                //     this.$message.warning('复制失败！');
                // })
                this.$refs.copyTemplateRef.getData(row)
                this.$refs.copyTemplateRef.visible = true
            }else{
                this.$message.warning('当前模板暂无内容！');
            }
            
        },
        handleClick(row,val){
            //console.log(row)
            this.editvisible = true
            this.selectData = {...row,isView:val}
            this.commpKindeditorKey = Date.now()
        },
        deletionClick(row){
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    jcmbdeleteMb({id:row.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success('删除成功')
                        }else{
                            that.$message.warning(res.message)
                        }              
                        that.$refs.acceptanceRegistrationRef.searchEvent()
                    })
                },
                
            });
        },
        //新增模板
        saveTemplateOk(){
            if(!this.fromSate.fmbbt){
                this.$message.warning('请输入模板标题')
                return
            }
            if(!this.fromSate.fmbnr){
                this.$message.warning('请输入描述模板内容')
                return
            }
            let data = {
                sqsxid:this.currentData.sqsxid,
                type:this.currentData.type,
                ...this.fromSate
            }
            jcmbaddmb(data).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.$refs.acceptanceRegistrationRef.searchEvent()
                    this.currentData.isAdd = false
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        //保存模板
        edithandleOk(){
            if(!this.selectData.fmbbt){
                this.$message.warning('请输入模板标题')
                return
            }
            if(!this.selectData.fmbnr){
                this.$message.warning('请输入描述模板内容')
                return
            }
            let data = {
                sqsxid:this.currentData.sqsxid,
                type:this.currentData.type,
                id:this.selectData.id,
                fmbbt:this.selectData.fmbbt,
                fmbnr:this.selectData.fmbnr,
            }
            jcmbupdateMb(data).then(res=>{
                if(res.code == 200){
                    this.editvisible = false
                    this.$refs.acceptanceRegistrationRef.searchEvent()
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        handleOk(){
            this.visible = false
        },
        
    }
}
</script>
<style lang="less">
.extractTemplate-modal-v{
    .ant-modal-body{
        padding:8px;
    }
}
// .extractTemplate-content-box{
    .extractsi-top-box{
        margin-top: 10px;
        display: flex;
        align-items: center;
        background-image: linear-gradient(to bottom, #e7f3ff, #fff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff);
        background-size: 100% 100% !important;
        padding:8px;
        border:1px solid #d9d9d9;
        .situation-left-title{
            display: inline-block;
            background-color: #e6f7ff;
            text-align: left;
            font-weight: 600;
            font-size: 16px;
            font-family: simHei;
            color: rgba(0, 0, 0, 0.85);
            margin-right: 8px;
        }
    }
    .extractTemplate-modal-box-v{
        td{
            padding: 5px;
            height: 30px;
        }
        .title-left-v{
            text-align: center;
            width: 117px;
            font-weight: 600;
            font-size: 16px;
            background-color:#e6f7ff;
            font-family: simHei;
            color: rgba(0, 0, 0, 0.85);
        }
    }
// }


</style>